<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	
	class Person {
	  constructor(firstName, lastName) {
	    this.firstName = firstName
	    this.lastName = lastName
	  }
	}

	defineProps({
		title:String,
		author: {
			name: String,
			company: String
		}
	})

	const isActive = ref(true)
	const hasError = ref(true)

	const classObject = reactive({
		active: true,
		'text-danger': false
	})

	const error = ref(null)
	const computClassObject = computed(() => ({
		active: isActive.value && !error.value,
		'text-danger': error.value && error.value.type === 'fatal'
	}))

	const activeColor = ref('red')
	const fontSize = ref(30)

	const styleObject = reactive({
		color: 'red',
		fontSize: '30px'
	})
	
	
</script>

<template>
	<div :class="{ active: isActive, 'text-danger': hasError  }">
		style绑定测试
	</div>
	<p class="text-danger">text-danger</p>
	<p :class="classObject">直接绑定一个对象</p>
	<p :class="computClassObject">绑定一个返回对象的计算属性</p>
	<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
		:style 支持绑定 JavaScript 对象值
	</div>
	<div :style="styleObject">直接绑定一个样式对象通常是一个好主意</div>
	<h1 style="color: red; font-size: 1em;">hello</h1>
	<p>{{author.name}} : {{author.company}}</p>

</template>



<style>
	.active {
		color: chocolate;
	}
</style>